<template>
	<page-meta :page-style="show ? 'overflow: hidden;' : ''"></page-meta>
	<view class="container">
		<u-popup :show="show" @close="close" mode="right" :duration="100" :closeOnClickOverlay="false">
			<view class="container-popup">
				<!-- 1. 自定义导航栏 -->
				<view class="custom-navbar" :style="{ paddingTop: (statusBarHeight * 2) + 'rpx' }">
					<view class="custom-navbar-ipt">
						<!-- #ifndef APP-NVUE -->
						<u-input class="input" placeholder="请输入城市名称" placeholder-style="fontSize: 26rpx;"
							fontSize="26rpx" border="none" v-model="regionName" @change="change" :focus="true">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input class="input" placeholder="请输入城市名称" placeholder-style="fontSize: 26rpx;"
								fontSize="26rpx" border="none" v-model="regionName" @change="change">
							<!-- #endif -->
								<template slot="suffix">
									<u-icon name="search" color="rgba(77, 77, 86, 1)" size="28"></u-icon>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view class="cancel" @click="close()">
						取消
					</view>
				</view>
				<scroll-view class="main-content" scroll-y="true">

					<view class="main-content-item" v-for="(citys,index) in cityList" :key="index"
						@click="selectCity(citys)">
						<view class="main-content-item-left">
							<view class="main-content-item-left-image">
								<image src="/static/city/selectCity-location.png" mode=""></image>
							</view>
							<view class="main-content-item-left-title">
								{{citys.shortName}}
							</view>
						</view>
						<view class="main-content-item-right">
							{{citys.mergerName}}
						</view>
					</view>

				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCityListBlurSearch,
		addRegionUserHistoy
	} from '@/request/api.js';
	export default {
		name: "commonSelectCity",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},

		data() {
			return {
				statusBarHeight: 0,
				systemInfo: null, // 系统信息
				regionName: '',
				debounceTimer: null, // 防抖定时器
				cityList: []
			};
		},
		created() {
			// this.getCurrentLocation();
			this.systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = this.systemInfo.statusBarHeight;
		},

		methods: {
			change(e) {
				// 防抖处理：用户停止输入500ms后才调用接口
				if (this.debounceTimer) {
					clearTimeout(this.debounceTimer);
				}

				this.debounceTimer = setTimeout(() => {
					if (this.regionName && this.regionName.trim()) {
						this.getCityList(this.regionName);
					}
				}, 500);
			},
			getCityList(regionName) {
				let queryParams = {
					level: 2,
					regionName
				}
				getCityListBlurSearch(queryParams).then(res => {
					this.cityList = res.data.rows.map(item => {
						// 处理 mergerName 字段，将"中国,山西省,晋城市"转换为"山西省-晋城市"
						if (item.mergerName) {
							const nameParts = item.mergerName.split(',');
							// 确保有足够的部分进行处理
							if (nameParts.length >= 3) {
								// 取第二和第三个元素（索引1和2），用-连接
								item.mergerName = `${nameParts[1]}-${nameParts[2]}`;
							} else if (nameParts.length === 2) {
								// 只有两级信息的情况
								item.mergerName = nameParts[1];
							} else if (nameParts.length === 1) {
								// 只有一级信息的情况
								item.mergerName = nameParts[0];
							}
						}
						return item;
					});
				}).catch(err => {
					console.error('获取城市列表失败:', err);
				})
			},
			// 点击某个城市
			selectCity(item) {
				let cityInfo = {
					code: item.regionId,
					name: item.regionName
				}
				this.$store.commit('setCityInfo', cityInfo);
				this.addNewHistoryCity(item)
				uni.navigateBack()
			},
			// 新增历史记录（点击某个城市后调用）
			addNewHistoryCity(item) {
				let cityInfo = {
					regionId: item.regionId,
					userId: this.$store.state.userInfo.userId,
				}
				addRegionUserHistoy(cityInfo).then(res => {
					console.log('新增成功--城市选择历史记录');
				})
			},
			close() {
				this.$emit('close');
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		.container-popup {
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;

			.custom-navbar {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin-top: 20rpx;

				.custom-navbar-ipt {
					border-radius: 40rpx;
					background-color: rgba(243, 242, 242, 1);
					height: 60rpx;
					flex: 1;

					.input {
						height: 60rpx;
						margin: 0 20rpx 0 40rpx;
					}
				}

				.cancel {
					width: 60rpx;
					height: 40rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					margin-left: 20rpx;
				}
			}

			.main-content {
				margin: 40rpx 30rpx;

				.main-content-item {
					width: calc(100% - 60rpx);
					height: 40rpx;
					line-height: 40rpx;
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.main-content-item-left {
						display: flex;

						.main-content-item-left-image {
							border-radius: 50%;
							width: 40rpx;
							height: 40rpx;

							image {
								border-radius: 50%;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.main-content-item-left-title {
							margin-left: 20rpx;
							font-size: 30rpx;
						}
					}

					.main-content-item-right {
						color: rgba(77, 77, 86, 1);
						font-size: 26rpx;
					}
				}
			}

		}
	}
</style>